<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../include/tag.jsp" %>
<html>
<head>
    <title>购买套餐</title>
    <%@include file="../include/commonFile.jsp" %>
    <style type="text/css">
        .payment-alipay, .payment {
            display: inline-block;
            text-align: center;
            vertical-align: top;
        }

        .payment-alipay > img, #wechat-pay > img {
            height: 60px;
            margin: 30px 0;
        }

        .payBtn {
            cursor: pointer;
            display: block;
            width: 120px;
            height: 30px;
            border: 1px solid #3091f2;
            line-height: 30px;
            border-radius: 2px;
            margin: 20px auto 35px;
            color: #3091f2;
        }

        .payBtn:hover {
            background-color: #3091f2;
            color: #fff;
        }

        .payment-alipay > a {
            color: #fff;
            margin: 20px auto 0px;
            background-color: #3091f2;
        }

        /**版本**/
        .payment-v {
            height: 30px;
            line-height: 30px;
        }

        .payment-v span {
            display: inline-block;
            vertical-align: top;
        }

        body {
            min-width: auto !important;
            background-color: white !important;
        }

        .payment-logo {
            margin-top: 21px;
        }

        .payment-logo > img {
            width: 40px;
            vertical-align: middle;
        }

        .payment-qcode {
            width: 190px;
            height: 190px;
            padding: 12px;
            background-color: #fff;
            border: 1px solid #E6E9EF;
            box-sizing: border-box;
            overflow: hidden;
        }

        .alipay-code {
            padding: 17px;
            border: 1px solid #E6E9EF;
            width: 154px;
            height: 154px;
        }

        [name=quantity] {
            height: 30px;
            line-height: 30px;
            width: 100px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
<div class="payment-inner" style="padding: 0 50px; padding-top: 10px;">
    <c:if test="${empty level.isUserDefined || level.isUserDefined == 2}">
        <div class="payment-v">
            <span>购买套餐：</span>
            <span>
                <b class="mr15 active-red">${level.name}</b>
                <c:if test="${level.type != 3}">
                    <b class="active-red">${level.price}元/${level.unit}</b>
                </c:if>
            </span>
            <c:if test="${level.type == 3}">
                <span>短信数量：</span>
                <span>
                    <b class="active-red">${level.quantity}条</b>
                </span>
            </c:if>
        </div>
        <div class="payment-v">
            <span>付款金额：</span>
            <span class="active-red b">${level.price}元</span>
        </div>
    </c:if>
    <c:if test="${level.isUserDefined == 1}">
        <div class="payment-v">
            <span>按条收费：</span>
            <span>
                <b class="active-red">${level.price}元/条</b>
            </span>
            <span style="margin-left: 20px">购买数量：</span>
            <span>
                <input name="quantity" type="number" min="1" />条
            </span>
        </div>
        <div class="payment-v">
            <span>付款金额：</span>
            <span class="active-red b pay-price"></span>
        </div>
    </c:if>
    <div class="payment-t select-payment" style="display: block;">
        <div class="payment-v">选择支付平台</div>
        <div class="third-payment" style="text-align:center;display: flex; padding-top: 10px">
            <div style="flex: 1">
                <div class="payment-alipay">
                    <img src="${ctx}/image/pay/alipay.png"/>
                    <div id="alipay-btn" class="payBtn">点击去支付</div>
                </div>
                <div id="ali-pay-qrcode" class="payment" style="display:none;">
                    <iframe id="payFrame" scrolling="no" frameborder="0" class="alipay-code"></iframe>
                    <div class="payment-logo">
                        <img src="${ctx}/image/pay/alipay.png"/>
                        支付宝扫码支付
                    </div>
                </div>
            </div>
            <div style="flex: 1">
                <div id="wechat-pay" class="payment">
                    <img src="${ctx}/image/pay/wechatpay.jpg"/>
                    <div id="wechat-btn" class="payBtn">点击去支付</div>
                </div>
                <div id="wechar-pay-qrcode" class="payment" style="display:none;">
                    <img id="wechat-pay-qrcode-img" class="payment-qcode"/>
                    <div class="payment-logo">
                        <img src="${ctx}/image/pay/wechatpay.jpg"/>
                        微信扫码支付
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="../include/incScript.jsp" %>
</body>
<script type="text/javascript">
    var checkTimeOut = null;
    var orderId = null;
    $(function () {
        var layer;
        layui.use(['layer'], function () {
            layer = layui.layer;
        });
        $("#alipay-btn").click(function () {
            //loading层
            var loadIndex = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
            var result = syncInsertOrder('0', '${level.id}', loadIndex);
            if (result) {
                $("#payFrame").attr('src', '${ctx}/pay/ali/pc/' + orderId + '/buyOrder.do');
                $(this).parent().hide().siblings('div').show();
                $("#wechat-btn").parent().show().siblings('div').hide();
                checkOrder(orderId);
            } else {
                layer.close(loadIndex);
            }
        });

        $("#wechat-btn").click(function () {
            //loading层
            var loadIndex = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
            var result = syncInsertOrder('1', '${level.id}', loadIndex);
            if (result) {
                $("#wechat-pay-qrcode-img").attr('src', '${ctx}/pay/wechat/pc/' + orderId + '/getQrCodeImg.do');
                $(this).parent().hide().siblings('div').show();
                $("#alipay-btn").parent().show().siblings('div').hide();
                $("#payFrame").attr('src', '');

                checkOrder(orderId);
            } else {
                layer.close(loadIndex);
            }
        });

        $("[name=quantity]").bind('input propertychange blur', function (e) {
            var value = $(this).val();
            if (value != "") {
                value = parseInt(value) * parseFloat('${level.price}');
                $(".pay-price").text(value.toFixed(2) + "元");
            } else {
                $(".pay-price").text("");
            }
        });
    });

    function checkOrder(orderId) {
        if (checkTimeOut != undefined) {
            clearInterval(checkTimeOut);
        }
        checkTimeOut = setInterval(function () {
            $.post("${ctx}/pay/ali/pc/checkOrderStatus.do", {orderId: orderId}, function (res) {
                if (res.success) {
                    if (res.data.status == 2) {
                        clearInterval(checkTimeOut);
                        util.layerAlertSuccess('${msg}', function () {
                            top.parent.location.reload();
                        });
                    } else if (res.data.status == 0) {
                        console.log("1111");
                    }
                } else {
                    util.layerMsgError('异常');
                }
            })
        }, 5000);
    }

    function syncInsertOrder(payWay, packageId, loadIndex) {
        var quantity = null;
        if (${level.isUserDefined == 1}) {
            quantity = $("[name=quantity]").val();
            if (quantity == "") {
                util.layerMsgError("请先输入购买数量");
                return false;
            } else if (!util.checkNumber(quantity)) {
                util.layerMsgError("请输入正确的数字");
                return false;
            } else if (parseInt(quantity) == 0) {
                util.layerMsgError("请输入大于0的数字");
                return false;
            }
        }
        var flag = true;
        $.ajax({
            type: 'POST',
            async: false, // 使用同步的方法
            data: {
                paymentWay: payWay,
                packageId: packageId,
                quantity: quantity
            },
            dataType: 'json',
            success: function (res) {
                layer.close(loadIndex);
                if (res.success) {
                    orderId = res.data;
                } else {
                    flag = false;
                    util.layerMsgError("加载支付二维码异常");
                }
            },
            url: '${ctx}/charge/package/insertOrder.do'
        });
        return flag;
    }
</script>
</html>
